#{extends 'AdminM/frame.html'/}
#{set 'moreStyles'}
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/pager/Pager.css'}" />
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/table.scss'}" />
#{/set}
#{set 'moreScripts'}
<script src="@{'/public/pager/jquery.pager.js'}" type="text/javascript" charset="utf-8"></script>

<link href="@{'/public/uploadify/uploadify.css'}" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="@{'/public/uploadify/swfobject.js'}"></script>
<script type="text/javascript" src="@{'/public/uploadify/jquery.uploadify.v2.1.4.min.js'}"></script>
#{/set}
#{set 'activeItem'}3#{/set}
<div class="navigationBar">
	<table>
		<tr>
			<td><img src="@{'/public/images/navigationHouse.gif'}"></td>
			<td><strong>当前位置：</strong></td>
			<td>
				<a href="/admin">首页</a>
				>>
				<a href="/admin/commodities;admin">商品管理</a>
				>>
				<a href="/admin/commodities;admin">商品列表</a>
				>>
				<font class="current">商品图片</font>
			</td>
		</tr>
	</table>
</div>

<script language="javascript">
$(function(){
	$("#dialog-form").dialog({
		autoOpen: false,
		height: 500,
		width: 500,
		modal: true,
		buttons: {
			'保存': function() {
				$("#new-form").submit();
			},
			Cancel: function() {
				$(this).dialog('close');
			}
		},
		close: function() {
			$("#image_upload").val("");
			$("#image").attr('src', "@{'/public/images/image-placeholder.png'}");
		}
	});
	
	/* uploadify2 */
	$('#image_upload').uploadify({
	    uploader	: '@{'/public/uploadify/uploadify.swf'}',
	    script		: '@{Attachments.create_uploadify}',
	    cancelImg	: '@{'/public/uploadify/cancel.png'}',
	    fileDataName: 'file',
	    fileExt     : '*.jpg;*.gif;*.png',
    	auto		: true,
    	onComplete	: function(event, ID, fileObj, response, data){
    		//显示附件
    		var getAttachmentAction = #{jsAction @Attachments.show(':id') /}
    		$("#image").attr('src', getAttachmentAction({id: response}));
    		//将附件ID添加到form里面
    		$("#image_upload").val(response);
    	}
	});
});

function newImage() {
	$('#dialog-form').dialog('open');
}

function goBack() {
	window.location.href="/admin/commodities;admin";
}

function deleteImage(commodityId, commodityImageId) {
	if(!confirm("确定删除此("+commodityImageId+")图片？")) return;
	$.ajax({
		url: "/admin/commodities/images/delete",
		data: "commodityId="+commodityId+"&commodityImageId="+commodityImageId,
		type: "POST",
		dataType: "json",
		complete: function(XMLHttpRequest, textStatus, errorThrown) {
			if(textStatus == "error") {
				var errJson = eval("("+XMLHttpRequest.responseText+")");
				var errMsg = "操作失败，"+errJson.message;
				$("#errMsg").html(errMsg);
				alert(errMsg);
			} else {
				window.location.href="/admin/commodities/"+commodityId+";images";
			}
		}
	});
}
</script>
<br>
<input type="button" value="新增图片" onClick="newImage()">&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" value="返回列表" onClick="goBack()">
<div id="errMsg" class="error">
	#{error 'errMsg'/}
</div>
<div class="list_criteria">
</div>
<div id="tableDiv">
	<table class="common-table">
		<thead>
			<tr>
				<th>ID</th>
				<th>图片</th>
				<th>顺序</th>
				<th>主要的</th>
				<th>上移动</th>
				<th>下移动</th>
				<th>删除</th>
			</tr>
		</thead>
		<tbody>
			#{if commodityImages}
				#{list items:commodityImages, as:'commodityImage'}
				<tr>
					<th><a href="#">${commodityImage.id}</a></th>
					<td>
						<img class="midImg" src="@{Attachments.show(commodityImage.image.id)}">
					</td>
					<td>
						${commodityImage.sequence}
					</td>
					<td>
						#{if commodityImage.sequence == 1}
							<font class="important">主要的</font>
						#{/if}
					</td>
					<td>
						<a href="@{admin.Commodities.updateSequence(id, commodityImage.id, true)}" class="editer">[上移]</a>
					</td>
					<td>
						<a href="@{admin.Commodities.updateSequence(id, commodityImage.id, false)}" class="editer">[下移]</a>
					</td>
					<td>
						<a href="javascript:deleteImage('${id}', '${commodityImage.id}')" title="删除">
							<img class="minImg" src="@{'public/images/delete.gif'}">
						</a>
					</td>
				</tr>
				#{/list}
			#{/if}
			#{else}
			<tr>
				<td colspan="5">没找到结果。</td>
			</tr>
			#{/else}
		</tbody>
	</table>
</div>
<div id="dialog-form" title="新增图片">
	#{form @admin.Commodities.addImages(), id:'new-form'}
	<fieldset>
		<input type="hidden" name="commodityId" value="${id}"/>
		<div style="width:100%; text-align:center;">
			<img id="image" src="@{'/public/images/image-placeholder.png'}"/>
	    	<p><input id="image_upload" type="text" name="attId" /></p>
    	</div>
	</fieldset>
	#{/form}
</div>